﻿<template>
  <div class="order-card" :class="{ 'is-expanded': isExpanded }">
    <OrderCardHeader :order-data="orderData" @checkbox-change="handleCheckboxChange" />

    <div class="card-content">
      <!-- 四个信息块 -->
      <div class="order-info-blocks">
        <OrderCardProductInfo :order-data="orderData" />
        <OrderCardFeeInfo :order-data="orderData" />
        <OrderCardPaymentInfo :order-data="orderData" />
        <OrderCardUserInfo :order-data="orderData" />
      </div>
      <OrderCardSource :order-data="orderData" />
    </div>

    <!-- 底部操作区域 -->
    <OrderCardFooter
      :is-expanded="isExpanded"
      :collapsed-buttons="collapsedButtons"
      :expanded-buttons="expandedButtons"
      @toggle="toggleExpand"
      @button-click="handleButtonClick"
    />
  </div>
</template>

<script setup>
  import OrderCardFooter from "./OrderCardFooter.vue";
  import OrderCardHeader from "./OrderCardHeader.vue";
  import OrderCardProductInfo from "./OrderCardProductInfo.vue";
  import OrderCardFeeInfo from "./OrderCardFeeInfo.vue";
  import OrderCardPaymentInfo from "./OrderCardPaymentInfo.vue";
  import OrderCardUserInfo from "./OrderCardUserInfo.vue";
  import OrderCardSource from "./OrderCardSource.vue";

  const props = defineProps({
    orderData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  });

  const emit = defineEmits(["view", "edit", "delete", "checkbox-change", "dispatch", "claim"]);

  // 展开状态
  const isExpanded = ref(false);

  // 判断是否显示派单按钮
  const shouldShowDispatchButton = () => {
    // 待派单订单展示此按钮，非代派订单不展示
    return props.orderData.status === "pending_dispatch" && !props.orderData.isProxyDispatch;
  };

  // 判断是否显示认领按钮
  const shouldShowClaimButton = () => {
    // 已关闭、已完成订单不展示此按钮
    if (props.orderData.status === "closed" || props.orderData.status === "completed") {
      return false;
    }

    // 未分配、未认领订单展示此按钮
    return !props.orderData.isAssigned && !props.orderData.isClaimed;
  };

  // 收起状态按钮配置
  const collapsedButtons = computed(() => {
    const buttons = [];

    // 认领按钮：未分配、未认领订单展示，已关闭、已完成订单不展示
    // if (shouldShowClaimButton()) {
    //   buttons.push({ key: "claim", label: "认领", type: "default" });
    // }

    // 详情按钮：始终显示
    buttons.push({ key: "detail", label: "详情", type: "default" });

    return buttons;
  });

  // 展开状态按钮配置
  const expandedButtons = computed(() => {
    const buttons = [];

    // 派单按钮：待派单订单且非代派订单时显示
    if (shouldShowDispatchButton()) {
      buttons.push({ key: "dispatch", label: "派单", type: "primary" });
    }

    // 认领按钮：未分配、未认领订单展示，已关闭、已完成订单不展示
    if (shouldShowClaimButton()) {
      buttons.push({ key: "claim", label: "认领", type: "default" });
    }

    // 详情按钮：始终显示
    buttons.push({ key: "detail", label: "详情", type: "default" });

    return buttons;
  });

  // 切换展开状态
  const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
  };

  // 处理按钮点击
  const handleButtonClick = button => {
    console.log("按钮点击:", button);
    // 可以在这里处理不同的按钮逻辑
    switch (button.key) {
      case "dispatch":
        console.log("派单订单");
        emit("dispatch", props.orderData);
        break;
      case "claim":
        console.log("认领订单");
        emit("claim", props.orderData);
        break;
      case "edit":
        console.log("编辑订单");
        emit("edit", props.orderData);
        break;
      case "detail":
        console.log("查看详情");
        emit("view", props.orderData);
        break;
      case "delete":
        console.log("删除订单");
        emit("delete", props.orderData);
        break;
    }
  };

  // 处理checkbox变化
  const handleCheckboxChange = data => {
    emit("checkbox-change", data);
  };
</script>

<style lang="scss" scoped>
  .order-card {
    background: var(--bg);
    border: 1px solid var(--bd9);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;

    &.is-expanded {
      .card-content {
        max-height: none;
      }
    }
  }

  .card-content {
    height: 90px; // 收起时的固定高度
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;

    .order-info-blocks {
      display: grid;
      grid-template-columns: 330fr 234fr 234fr 234fr;
      gap: 16px;
      height: 90px;
      margin: 16px 16px 6px 16px;
      box-sizing: border-box;

      // 确保每个网格项不会超出分配的空间
      > * {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
      }
    }
  }

  .order-card.is-expanded .card-content {
    height: auto;

    .order-info-blocks {
      height: auto;
    }
  }
</style>
